'use client'

import Link from "next/link"
import { usePathname } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

import { cn } from "@/lib/utils"

type NavItemProps = {
    label: string
    href: string
    icon: string
    className?: string
}

const NavItem = ({ label, href, icon, className }: NavItemProps) => {
    const pathname = usePathname()
    const active = pathname === href

    return (
        <div className={cn(
            "relative flex items-center justify-center",
            className
        )}>
            <Button asChild variant='ghost' className="rounded-sm w-24" >
                <Link href={href} className={cn(
                    'hover:text-foreground',
                    !active && 'text-muted-foreground'
                )}>{label}</Link>
            </Button>
            <Separator
                className={cn(
                    "absolute bottom-0 w-11/12 h-1 bg-secondary-foreground/50",
                    !active && 'hidden'
                )}
            />
        </div>
    )
}

export default NavItem